﻿<!DOCTYPE html>
<html>
<head>
    <title>关联小组</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css?v=1">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <link href="/ViewV5/JS/element/index.css" rel="stylesheet" />

    <style>
        .el-button-group button {
            border-radius: 0px;
        }

        .widthmax {
            width: 100%
        }

        .pd40 {
            padding: 40px;
        }

        .pd0 {
            padding: 0;
        }

        .vue-treeselect__menu {
            max-height: 600px !important;
        }
    </style>
</head>
<body class="BG">
    <div id="DATABI_DSETZZ" class="FormV">
        <el-container>
            <el-main class="elmain pd40">
                <div class="panel-df">
                    <div class="container containerb width840" style="padding:0">
                        <div class="panel panel-defaul  panhead" style="height:600px">

                            <el-row>
                                <el-col :xs="24" :sm="24">
                                    <h4 class="text-center" style="font-size:20PX;font-weight:bolder;margin-bottom:10px">
                                        <span>关联村组</span>
                                    </h4>
                                    <el-button type="primary" @click="onSubmit" size="mini" style="margin-bottom:10px">保存斗别关联村组</el-button>

                                    <treeselect v-model="treevalue" default-expand-level="1" placeholder="搜索村组" value-consists-of="LEAF_PRIORITY" noOptionsText="没有可选项...." :options="treedata" :show-count="true" :disable-branch-nodes="false" :always-open="true" :multiple="true" />
                                    <!--<ul class="jg-list-box " style="padding-left:10px;">
                                        <el-tree class="filter-tree"
                                                 :data="treedata"
                                                 :props="defaultProps"
                                                 :expand-on-click-node="iszk"
                                                 node-key="DeptCode"
                                                 default-expand-all
                                                 show-checkbox
                                                 highlight-current
                                                 ref="tree">
                                        </el-tree>
                                    </ul>-->

                                </el-col>

                            </el-row>

                        </div>


                    </div>
                </div>
            </el-main>
        </el-container>

    </div>
    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/httpVueLoader.js"></script>
    <script src="/ViewV5/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <!-- 引入组件库 -->
    <script src="/ViewV5/JS/element/element.js?v=1"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
    <script src="/ViewV5/JS/bijs.js?v=4"></script>

    <script>
        Vue.component('treeselect', VueTreeselect.Treeselect);
        var app = new Vue({
            el: '#DATABI_DSETZZ',
            components: {
                'base-loading': httpVueLoader('/ViewV5/Base/Vue/Loading.vue'),
            },
            data: {
                treevalue: [],
                treedata: [],
                initdata: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                iszk: false,
                zid: ComFunJS.getQueryString('zid', '0'),
                dbid: ComFunJS.getQueryString('dbid', '0'),
                FormData: {

                }

            },

            methods: {
                jsonToTree: function (jsonData, id, pid, children) {
                    for (var i = 0; i < jsonData.length; i++) {
                        jsonData[i][id] = jsonData[i][id] + "";
                        jsonData[i][pid] = jsonData[i][pid] + "";

                    }//数组里不能为数字
                    let result = [],
                        temp = {};
                    for (let i = 0; i < jsonData.length; i++) {
                        temp[jsonData[i][id]] = jsonData[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
                    }
                    for (let j = 0; j < jsonData.length; j++) {
                        let currentElement = jsonData[j];
                        let tempCurrentElementParent = temp[currentElement[pid]]; // 临时变量里面的当前元素的父元素
                        if (tempCurrentElementParent) {
                            // 如果存在父元素
                            if (!tempCurrentElementParent[children]) {
                                // 如果父元素没有chindren键
                                tempCurrentElementParent[children] = []; // 设上父元素的children键
                            }
                            tempCurrentElementParent[children].push(currentElement); // 给父元素加上当前元素作为子元素
                        } else {
                            // 不存在父元素，意味着当前元素是一级元素
                            result.push(currentElement);
                        }
                    }
                    return result;
                },
                onSubmit: function () {
                    var tempindex = this;
                    //所有选中得节点都要保存
                    $.getJSON("/api/Bll/ExeAction?Action=SFJS_SETDBCZ", { P1: app.dbid, P2: app.treevalue.join()},
                        function (result) {
                            if (result.ErrorMsg == "") {
                                top.ComFunJS.winsuccess("设置成功");
                            }
                        });
                }
            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    $.getJSON('/api/Bll/ExeAction?Action=SFJS_GETXQZTREE', { P1: app.zid, P2: app.dbid }, function (resultData) {
                        app.initdata = resultData.Result;
                        var jsondata = pro.jsonToTree(resultData.Result, 'id', 'pid', 'children');
                        app.treedata = jsondata;
                        if (resultData.Result1) {
                            app.treevalue = resultData.Result1.split(',');

                        }

                    })
                })
            },
            created() {
            },
            watch: {

            }

        })


    </script>

</body>

</html>